<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:p="http://primefaces.org/ui">  

    <h:head>  
        <title>Cardapio Livre</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/reset.css" type="text/css" media="all"/> 
        <link rel="stylesheet" href="css/grid.css" type="text/css" media="all"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
        <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/> 
        <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
        <h:outputStylesheet library="css" name="primefaces-personalizado.css" />

    </h:head>  
    <h:body>   
        
        <center>
        <h:form id="form" style=" width: 320px;">  

            <p:panel id="painelEstabelecimento"  >                  
                <p:messages id="messages" />  

                <h:panelGrid columns="3" cellpadding="1" cellspacing="5" style="float:left; height: 170px;">  

                    <h:outputLabel style="font-size: 15px" for="email" value="Email: *" />  
                    <p:inputText id="email" value="#{gerencia.conta.email}" required="true" label="Campo email">  
                        <f:validateLength minimum="2" />  
                    </p:inputText>  
                    <p:message for="email" display="icon"/>  

                    <h:outputLabel style="font-size: 15px" for="nome" value="Nome: *" />                      
                    <p:inputText id="nome" value="#{gerencia.conta.nome}" required="true" label="Campo nome">  
                        <f:validateLength minimum="2" />  
                    </p:inputText>  
                    <p:message for="nome" display="icon"/>

                    <h:outputLabel style="font-size: 15px" for="sobrenome" value="Sobrenome: *" />                      
                    <p:inputText id="sobrenome" value="#{gerencia.conta.sobrenome}" required="true" label="Campo sobrenome">  
                        <f:validateLength minimum="2" />  
                    </p:inputText>  
                    <p:message for="sobrenome" display="icon"/>

                    <h:outputLabel style="font-size: 15px" for="pwd1" value="Senha: *" />  
                    <p:password id="pwd1" value="#{gerencia.conta.senha}" match="pwd2" label="Campo Senha não confere" required="true" feedback="true"   
                                promptLabel="Força da senha" weakLabel="Fraca"  
                                goodLabel="Média" strongLabel="Forte" />   
                    <br/>
                    <h:outputLabel style="font-size: 15px" for="pwd2" value="Confirmação: *" />  
                    <p:password id="pwd2" label="Confirmação" required="true"/>  
                </h:panelGrid>   

                <p:selectBooleanCheckbox id="box" widgetVar="box" />                
                <h:outputLabel style="font-size: 15px" value="Li e aceito os " />  
                <a href="#" style="text-decoration: none; color: blue;">Termos de Compromisso</a>
                <h:outputLabel style="font-size: 15px" value=" do site" />  
                <br />              
                <br /> 
                <p:commandButton  id="btn" styleClass="btnSalvar" value="Salvar" update="painelEstabelecimento"  action="#{gerencia.salvarConta()}" onclick="if(!document.getElementById('form:box_input').checked){alert('É preciso aceitar os termos do site.');return false;}"/>  

                <p:confirmDialog id="confirmDialog" message="Já existe uma conta para esse email"  
                                 header="Conta Inválida" severity="alert" widgetVar="confirmation">     
                </p:confirmDialog>

            </p:panel>  
        </h:form>  
        </center>    
    </h:body>  
</html>